<template>
    <div class="doODM">
        <div>
            <table>
                <tr class="tr_height">
                    <td>ODM品类：</td>
                    <td>
                        <div class="common_btn2">请选择</div>
                    </td>
                </tr>
                <tr class="tr_height">
                    <td>ODM类型：</td>
                    <td>
                        <div style="display: flex;">
                            <template v-for="(item, index) in odmType" :keys="index">
                                <div v-if="item == '1'" class="item_color active_color_active" @click="changeOdmType(index)">{{ odmTypeName[index] }}</div>
                                <div v-else class="item_color" @click="changeOdmType(index)">{{ odmTypeName[index] }}</div>
                            </template>
                        </div>
                    </td>
                </tr>
                <tr class="tr_height">
                    <td>代工数量：</td>
                    <td>
                        <el-input-number style="margin: 5px 10px;" v-model="itemNum" :step="1" :min="0" :max="9999" step-strictly size="mini"></el-input-number>
                    </td>
                </tr>
                <tr class="tr_height">
                    <td>代工方式：</td>
                    <td>
                        <div style="display: flex;">
                            <div class="item_color" :class="{active_color_active: active_color == '1'}" @click="active_color = '1'">不包料代工</div>
                            <div class="item_color" :class="{active_color_active: active_color == '2'}" @click="active_color = '2'">半包料代工</div>
                            <div class="item_color" :class="{active_color_active: active_color == '3'}" @click="active_color = '3'">包料代工</div>
                        </div>
                    </td>
                </tr>
                <tr class="tr_height">
                    <td>开模：</td>
                    <td>
                        <div style="display: flex;">
                            <div class="item_color" :class="{active_color_active: active_model == '1'}" @click="active_model = '1'">代工厂开模</div>
                            <div class="item_color" :class="{active_color_active: active_model == '2'}" @click="active_model = '2'">商家自己开模</div>
                        </div>
                    </td>
                </tr>
                <tr class="tr_height">
                    <td>导入产品说明书：</td>
                    <td>
                        <input type="file" name="" id="">
                    </td>
                </tr>
                <tr class="tr_height">
                    <td>联系电话：</td>
                    <td>
                        <input type="text" class="td_input" name="" id="">
                    </td>
                </tr>
                <tr class="tr_height">
                    <td>联系邮箱：</td>
                    <td>
                        <input type="text" class="td_input" name="" id="">
                    </td>
                </tr>
                <tr class="tr_height">
                    <td>需求描述：</td>
                    <td>
                        <textarea rows="10" cols="100"></textarea>
                    </td>
                </tr>
            </table>
        </div>
        <div>
            <div class="common_title">
                联系我们
            </div>
            <div>
                联系电话：027-1234567
            </div>
            <div>
                <img src="./../../assets/222.png" alt="">
            </div>
        </div>
        <div>
            <div class="common_title">
                成功案例
            </div>
            <div>
                <el-carousel height="280px">
                    <el-carousel-item>
                        <img style="width: 100%;" src="./../../assets/home/004.png" alt="" srcset="">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img style="width: 100%;" src="./../../assets/home/003.png" alt="" srcset="">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img style="width: 100%;" src="./../../assets/home/002.png" alt="" srcset="">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img style="width: 100%;" src="./../../assets/home/001.png" alt="" srcset="">
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div style="height: 80px; width: 100%;"></div>
    </div>
</template>

<script>
export default {
    name: 'doODM',
    data() {
        return {
            itemNum: 1,
            active_color: "1",
            active_model: "1",
            odmType: ["1","1","0","0","0"],
            odmTypeName: ["软件","硬件","结构","外观","工艺"]
        }
    },
    mounted() {
    },
    methods: {
        changeOdmType(index) {
            this.$set(this.odmType, index, this.odmType[index] === '1' ? '0' : '1');
            console.log(this.odmType)
        }
    }
}
</script>
<style scoped>
.item_color {
    margin: 5px 10px;
    padding: 0 10px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: var(--color-common-ff);
    border: 1px solid var(--color-common-f2);
    border-radius: 5px;
    color: var(--color-font);
}
.active_color_active {
    background-color: var(--color-base);
    border: 1px solid var(--color-base);
    color: var(--color-common-ff);
}
.tr_height {
    height: 62px;
    line-height: 62px;
}
.td_input {
    height: 30px;
    width: 300px;
}
</style>